<template>
  <Layout>
    <PageHeaderNew :items="items"></PageHeaderNew>
    <div class="row">
      <div class="col-md-3" v-for="(data, index) in statData" :key="index">
        <div class="card">
          <div class="card-body">
            <div class="media" style="align-items: center;">
              <div class="text-primary">
                <i :class="`${data.icon} font-size-24`"></i>
              </div>
              <div class="media-body overflow-hidden" style="text-align:center;">
                <p class="text-truncate font-size-14 mb-2">{{data.title}}</p>
                <h4 class="mb-0">{{data.value}}</h4>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-xl-12">
        <div class="card">
          <div class="card-body">
            <div class="all-products">客户状态 · 东南大学</div>
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="数据统计" name="数据统计">
                <chat v-if="activeName=='数据统计'" />
              </el-tab-pane>
              <el-tab-pane label="信源清单" name="信源清单">
                <sourceList />
              </el-tab-pane>
              <el-tab-pane label="自媒体号" name="自媒体号">
                <weMedia />
              </el-tab-pane>
              <el-tab-pane label="指定网站" name="指定网站">
                <specifyWebSite />
              </el-tab-pane>
              <el-tab-pane label="接口清单" name="接口清单">
                接口清单
              </el-tab-pane>
              <el-tab-pane label="客户信息" name="客户信息">
                <information />
              </el-tab-pane>
              <el-tab-pane label="空白页面" name="空白页面">
                <blankPage />
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </div>
    </div>
  </Layout>
</template>
<script>
import Layout from "../../layouts/main";
import PageHeaderNew from "@/components/page-header-new";
import information from "./information";
import sourceList from "./sourceList";
import weMedia from "./weMedia";
import specifyWebSite from "./specifyWebSite";
import chat from "./chat";
import blankPage from "./blankPage";
export default {
  components: { Layout, PageHeaderNew, information, sourceList, weMedia, specifyWebSite, chat, blankPage},
  data () {
    return {
      items: [
        {
          text: "客户管理",
          url: "/custom",
        },{
          text: "客户详情",
          url: "/",
        }
      ],
      statData: [
        {
          title: "合作项目",
          icon: 'ri-home-5-line',
          value: "5个"
        }, {
          title: "调用接口",
          icon: 'ri-links-line',
          value: "27个"
        }, {
          title: "调用信源",
          icon: 'ri-record-circle-line',
          value: "2,913"
        }, {
          title: "自媒体号",
          icon: 'ri-qq-line',
          value: "202"
        }, {
          title: "指定网站",
          icon: 'ri-at-line',
          value: "13"
        }
      ],
      activeName: "客户信息",
    }
  },
  methods: {
    changeTabs(v){
      console.log(v);
    },
    handleClick() {
      console.log("触发tabs标签页切换，当前标签页：" + this.activeName);
    },
  }
}
</script>
<style lang="scss" scoped>
.row{
  .col-md-3{
    flex: 0 0 20%;
    max-width: 20%;
  }
}

.all-products {
  font-size: 15px;
  font-weight: bold;
  padding-left: 15px;
  padding-bottom: 15px;
}
::v-deep .el-tabs__item.is-active{
  color: #5664d2;
}
::v-deep .el-tabs__active-bar{
  background-color: #5664d2;
}
::v-deep .el-tabs__item.is-top:hover{
  color: #5664d2;
}
</style>
